import classnames from 'classnames';
import {memo, useState} from 'react';
import {Nav} from 'react-bootstrap';
import {useNavigate} from 'react-router-dom';
import usePathname from '@/components/hook/usePathname';
import style from './style.module.scss';

const items = [
    {label: '格式化json', key: 'json-editor'},
    {label: '在线diff', key: 'diff'},
    {label: '图片压缩', key: 'image-mini'},
    {label: '网页截图', key: 'webpage-screenshot'}
];

const Header = memo(() => {
    const {firstLevel} = usePathname();
    const [activeKey, setActiveKey] = useState(firstLevel || '');
    const navigate = useNavigate();

    const handleSelect = (key: string | null) => {
        if (!key) return;
        navigate(key);
        setActiveKey(key);
    };

    return (
        <header className={classnames(style['header-wrapper'])}>
            <Nav variant='underline' activeKey={activeKey} onSelect={handleSelect}>
                {items.map(({label, key}) => (
                    <Nav.Item key={key}>
                        <Nav.Link eventKey={key} key={key}>{label}</Nav.Link>
                    </Nav.Item>
                ))}
            </Nav>
        </header>
    );
});

export default Header;
